<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
          stretch
        >
          <el-tab-pane label="疫情地图" name="map">
            <el-row type="flex" class="row-bg">
              <el-col :span="16" :offset="4">
                <el-card>
                  <el-col :span="8" :offset="12" style="color: #409eff"
                    >疫情地图</el-col
                  >
                  <el-col
                    :span="10"
                    :offset="10"
                    style="color: #409eff"
                    v-if="update_time"
                    ><small>统计截止于{{ update_time }}</small></el-col
                  >
                  <el-col
                    ><el-radio-group v-model="valueRadio" @change="changeRadio">
                      <el-radio-button label="现有确诊"></el-radio-button>
                      <el-radio-button label="累计确诊"></el-radio-button>
                    </el-radio-group>
                  </el-col>
                  <el-col
                    ><div id="main" style="width: 100%; height: 400px"></div
                  ></el-col>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="今日汇总" name="today">
            <div>
              <el-row style="padding-bottom: 10px">
                <el-col
                  :span="6"
                  :offset="1"
                  style="color: #409eff"
                  v-if="today.updateTime"
                  ><small>统计截止于{{ today.updateTime }}</small></el-col
                >
              </el-row>
              <el-row type="flex" class="row-bg" justify="space-around">
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          较上日 {{ today.asymptomaticIncr }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.asymptomaticNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8"> 累计无症状 </el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          较上日 {{ today.curedIncr }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.curedNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8"> 累计治愈 </el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          较上日 {{ today.deadIncr }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.deadNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8"> 累计死亡</el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
              </el-row>

              <el-row
                type="flex"
                style="padding-top: 20px"
                justify="space-around"
              >
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          较上日 {{ today.seriousIncr }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.seriousNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8"> 累计重症 </el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8"> &nbsp;</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.confirmedNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8"> 累计确诊 </el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
                <el-col :span="6"
                  ><div>
                    <el-card>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          较上日 {{ today.externalConfirmedIncr }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">
                          {{ today.externalConfirmedNum }}
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8" :offset="8">境外输入</el-col>
                      </el-row>
                    </el-card>
                  </div></el-col
                >
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="实时资讯" name="news">
            <div>
              <el-timeline>
                <el-timeline-item
                  :timestamp="item.updateTime"
                  placement="top"
                  v-for="(item, index) in news"
                  :key="index"
                >
                  <el-card>
                    <el-row style="padding-bottom:10px;">
                      <el-col
                        ><el-link :href="item.sourceUrl" target="_blank">{{
                          item.title
                        }}</el-link></el-col
                      >
                    </el-row>

                    <el-row>
                      <el-col>
                       <el-tag size="mini"  >来源:{{ item.infoSource }}</el-tag> </el-col
                      > </el-row
                    >
                  </el-card>
                </el-timeline-item>
              </el-timeline>

              <!-- <el-row v-for="(item, index) in news" :key="index">
                <el-col :span="12">
                  <el-link :href="item.sourceUrl" target="_blank">{{
                    item.title
                  }}</el-link>
                </el-col>

                <el-col :span="6">
                  <el-tag size="medium">{{ item.infoSource }} {{ item.updateTime }}</el-tag>
                </el-col>
       
              </el-row> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const defaultValueRadio = "现有确诊";
export default {
  name: "Yiqing",

  data() {
    return {
      defaultValueRadio,
      result: [],
      min: 0,
      max: 0,
      geoJson: [],
      valueRadio: defaultValueRadio,
      echartsInstance: undefined,
      update_time: "",
      today: {},
      activeName: "map",
      news: [],
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    handleClick(tab, event) {
      const self = this;
      const name = tab.name;
      switch (name) {
        case "news":
          self.queryNews();
          break;

        case "today":
          self.queryToday();
          break;

        case "map":
        default:
          self.queryProvince();
          break;
      }
    },
    init() {
      this.drawChart();
      this.queryToday();
    },
    changeRadio() {
      this.init();
    },
    queryToday() {
      const self = this;
      self.$axios.get("/api/yiqing/today").then((res) => {
        if (res && res.data) {
          self.today = res.data;
        }
      });
    },
    queryNews() {
      const self = this;
      self.$axios.get("/api/yiqing/news").then((res) => {
        if (res && res.data) {
          self.news = res.data;
        }
      });
    },
    queryProvince() {
      const self = this;
      self.$axios.get("/api/yiqing/province-simple").then((res) => {
        if (res && res.data) {
          self.result = res.data;
        }
      });
    },
    drawChart() {
      const self = this;
      const echarts = self.$echarts;
      if (self.echartsInstance && !self.echartsInstance.isDisposed) {
        self.echartsInstance.dispose();
      }
      self.echartsInstance = self.$echarts.init(
        document.getElementById("main")
      );
      self.echartsInstance.showLoading();
      self.$axios.get("/json/china.json").then((res) => {
        const mapJson = res.data;
        self.geoJson = mapJson;

        echarts.registerMap("china", mapJson);

        let option = {
          title: {
            show: false,
            top: 0,
          },
          tooltip: {
            trigger: "item",
            formatter: function (params, ticket, callback) {
              return (
                params.name +
                "<br/>" +
                self.valueRadio +
                " " +
                (params.value | 0) +
                "例"
              );
            },
            valueFormatter: (value) => value | 0,
          },

          toolbox: {
            show: false,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },
          visualMap: {
            min: 0,
            max: 0,
          },
          series: [
            {
              name: " ",
              type: "map",
              map: "china",
              label: {
                show: false,
              },
              data: [],
            },
          ],
        };
        self.echartsInstance.setOption(option);
        self.$axios.get("/api/yiqing/province-simple").then((res) => {
          if (res && res.data) {
            const result = res.data;
            self.update_time = result.update_time;
            let r = self.geoJson.features.map((res) => {
              let value = result.value1_map[res.properties.adcode] | 0;
              if (self.valueRadio === defaultValueRadio) {
                value = result.value_map[res.properties.adcode] | 0;
              }
              return {
                name: res.properties.name,

                value: value,
              };
            });
            self.min = res.data.min;
            self.max = res.data.max;
            self.echartsInstance.setOption({
              series: [{ data: r }],
              visualMap: {
                type: "piecewise",
                max: 10000,
                min: 0,
                pieces: [
                  { gte: 10000 },
                  { gte: 1000, lte: 9999 },
                  { gte: 500, lte: 999 },
                  { gte: 100, lte: 499 },
                  { gte: 10, lte: 99 },
                  { gte: 1, lte: 9 },
                  { value: 0 },
                ],
                maxOpen: true,
                minOpen: true,
                calculable: true,
                realtime: false,
              },
            });

            self.echartsInstance.hideLoading();
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>